<template>
    <div class="container">
        <el-row class="wrap-search">
            <el-button type="primary" size="medium" @click="$router.push('/talentInEdit')">人才材料录入</el-button>
            <el-button type="primary" size="medium" @click="delAll">批量删除</el-button>
            <!--<el-button type="primary" size="medium" @click="dialogVisible = true">批量导入</el-button>-->
            <!--<form :action="url" method="get">-->
                <!--<button class="export" type="submit">批量导出</button>-->
            <!--</form>-->
            <span class="export-span" v-if = "multipleSelection.length != 0">
                <form :action="url" method="get" >
                    <button class="export" type="submit">批量导出</button>
                    <input type="hidden" name="idIn"  :value="multipleSelection" />
                    <input type="hidden" name="nameLike"  :value="configList.param.nameLike" />
                    <input type="hidden" name="country"  :value="configList.param.country" />
                    <input type="hidden" name="pageSize"  :value="1000" />
                </form>
            </span>
            <span  class="export-span" v-else>
                <button class="export" type="submit" @click="check">批量导出</button>
                <input type="hidden" name="ids" :value="multipleSelection" />
            </span>
        </el-row>
        <el-row class="wrap-search">
            <div class="search-item">
                <div class="search-title">人才姓名查询：</div>
                <el-input style="width: 200px;" class=""
                          placeholder="请输入关键字"
                          v-model="configList.param.nameLike" ></el-input>
            </div>
            <el-button  class="search-btn" type="primary" @click="getList()">查询</el-button>
        </el-row>
        <div class="">
            <table-list ref="tableList" :tableConfig='configList' @selectTable="selectTable">
                <el-table-column
                        slot="select"  align="center" label="全选"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column slot="sex"  align="center" label="性别">
                    <template slot-scope="scope">
                        <div v-if="scope.row.sex == 'female'">女性</div>
                        <div v-else-if="scope.row.sex=='male'">男性</div>
                        <div v-else>未知</div>
                    </template>
                </el-table-column>
                <el-table-column class="btn"  min-width="200px" label="操作" slot="btn" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button  @click="$router.push('/talentInDetail?id='+scope.row.id)" type="primary" size="small">查看</el-button>
                        <el-button  @click="$router.push('/talentInEdit?id='+scope.row.id)" type="primary" size="small">编辑</el-button>
                        <el-button  @click="handleOn(scope.row.id)" type="primary" size="small" v-if="scope.row.status == 'off'">上线</el-button>
                        <el-button  @click="handleOff(scope.row.id)" type="primary" size="small" v-else>下线</el-button>
                        <el-button  class="search-btn" size="small" type="danger" @click="delLevel(scope.row.id)">删除</el-button>
                        <!-- <el-button v-if="scope.row.isRefundBtn == 'y'" class="search-btn" size="small" type="danger" @click="refundBtn(scope.row.id)">退款</el-button> -->
                    </template>
                </el-table-column>
            </table-list>
        </div>
        <el-dialog
                title="批量导入"
                :visible.sync="dialogVisible"
                size="tiny"
        >
            <div class="upload-export">
                <div>注意事项</div>
                <ul>
                    <li>1.导入的数据文件必须为可识别的Excel文件，后缀名为.xls，且文件大小不多于2M。</li>
                    <li>2.不可导入已有的信息。</li>
                    <li>3.Excel表字段格式必须和后台字段保持一致。</li>
                </ul>
                <el-upload
                        class="upload-demo"
                        :action="upLoadUrl"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-upload="beforeUploadFile"
                        :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <ul class="upload-list">
                    <li v-for="(item, index) in fileList">
                        <a :href="item.url" target="_blank">{{item.name}}</a>
                    </li>
                </ul>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleConfirm">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    export default {
        data() {
            return {
                url: '',
                configList:{
                    url:CONSTANT.URL.TALENT.LIST,
                    configList:[
                        {
                            slot: "select"
                        },
                        {
                            label:'姓名',
                            prop:'name',
                        },
                        {
                            slot: "sex"
                        },
                        {
                            label:'经验',
                            prop:'workyears',
                        },
                        {
                            label:'联系电话',
                            prop:'mobile',
                        },
                        {
                            label:'学历',
                            prop:'degreeText',
                        },
                        {
                            label:'所属分类',
                            prop:'category',
                        },
                        {
                            label:'来源学校',
                            prop:'fromSchool',
                        },
                        {
                            label:'来源班级',
                            prop:'fromClass',
                        },
                        {
                            label:'月薪',
                            prop:'salary',
                        },
                        {
                            label:'录入时间',
                            prop:'gmtCreated',
                        },
                        {
                            slot:'btn'
                        }
                    ],
                    param:{
                        nameLike: "",
                        country: "中国"
                    },
                    type:'',
                    width:'',
                    isPagination:true
                },
                dialogVisible:false,
                imgUrl:'',
                upLoadUrl:'',
                dataList:[],
                provinceList:[],
                cityList:[],
                statusArr:{
                    'on':'上架',
                    'off':'下架'
                },
                ids: [],
                fileList: [],
                multipleSelection: [],
                exportParam: {
                    idIn: [],
                    pageSize: 1000,
                    country: "中国"
                }
            }
        },
        components: {
            'table-list':() => import('../common/my-table')
        },
        watch:{
        },
        created(){

        },
        mounted() {
            let sessionId = common.getCookie('sessionId');
            this.url = CONSTANT.URL.TALENT.EXPORT+"?sessionId="+sessionId;
        },
        methods: {
            getProvince:function(){
                let url = CONSTANT.URL.COMMON.GETPROVINCELIST,
                    data={}
                common.requestAjax(url,{},data,(res)=>{
                        if(res.status == 200){
                            this.provinceList = res.data.bussData;
                        }
                    }
                )
            },
            getCityList:function(){
                let url = CONSTANT.URL.COMMON.GETCITYLIST+'/'+this.configList.param.provinceCode,
                    data={}
                common.requestAjax(url,{},data,(res)=>{
                        if(res.status == 200){
                            this.cityList = res.data.bussData;
                        }
                    }
                )
            },
            getList(){
                this.$refs.tableList.getList()
            },
            check:function(){
                this.$message({
                    type: 'warning',
                    message: '请先选择人才'
                });

            },
            delLevel(id){
                this.$confirm('确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let  url = CONSTANT.URL.TALENT.DELETEITEM,
                        param = {id: id}
                    common.requestAjax(url,{},param,(res)=>{
                        if(res.status == 200){
                            this.$message({
                                type: 'success',
                                message:res.msg
                            });
                            this.getList();
                        }else{
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            selectTable(val) {
                this.ids = []
                this.multipleSelection = []
                val.map( item => {
                    this.ids.push(item.id)
                    this.multipleSelection.push(item.id)
                })
            },
            delAll() {
                if (!this.ids.length) {
                    this.$message({
                        type: 'warning',
                        message: '请选择批量删除的记录'
                    });
                    return false;
                }
                this.$confirm('确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let url = CONSTANT.URL.TALENT.DELETES;
                    common.requestAjax(url, {}, {ids: this.ids}, (res) => {
                        if(res.status == 200){
                            this.$message({
                                type: 'success',
                                message:res.msg
                            });
                            this.getList();
                        }else{
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            beforeUploadFile(file) {
                let url =CONSTANT.URL.COMMON.UPLOAD;
                let splitArr = file.name.split("."),
                    len = splitArr.length;
                let param = {
                    suffix:file.name.split(".")[len - 1],   // 文件后缀  png
                    contentType:file.type             // 文件类型  image/png
                }
                common.requestAjax(url,param,null,(res)=> {
                    this.upLoadUrl = res.data.bussData.uploadUrl;
                    common.uploadFile(this.upLoadUrl,file,file.type,(data)=> {
                        this.fileList.push({
                            name: file.name,
                            url: res.data.bussData.downloadUrl
                        })
                    })
                });
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleOn(id) {
                let url = CONSTANT.URL.TALENT.ON;
                common.requestAjax(url, {}, {id: id}, (res) => {
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                })
            },
            handleOff(id) {
                let url = CONSTANT.URL.TALENT.OFF;
                common.requestAjax(url, {}, {id: id}, (res) => {
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                })
            },
            handleConfirm() {
                this.dialogVisible = false
                this.fileList = []
            }
        }
    }
</script>

<style lang="scss">
    .upload-export {
        .el-upload-list{
            display: none;
        }
        .upload-list {
            padding: 0;
            li {
                list-style: none;
                color: #606266;
                a {
                    color: #606266;
                }
            }
        }
    }
    .container {
        .wrap-search{
            margin-bottom: 20px;
            .search-item{
                float: left;
                margin-right: 20px;
                margin-top: 20px;
                .el-input,.el-select{
                    width: 180px;
                }
            }
            button{
                float: left;
                margin-top: 20px;
            }
            .search-title{
                display: inline;
                width: 100px;
                height: 36px;
                line-height: 36px;
                text-align: right;
                margin-bottom: 20px;
                margin-right: 10px;
            }
        }
        .el-table__row{
            .cell{
                button{
                    margin-top: 10px;
                }
            }
            video{
                width: 100px;height: auto;
            }
            img.video-img{
                width: 60px;height: 60px;
                cursor: pointer;
                border-radius: 30px;
            }
        }
        .pagination {
            text-align: center;
            width: 80%;
            margin-top: 60px;
        }
        .el-dialog__body{
            img{
                display: block;
                margin: 0 auto;
            }
        }
        .user-num{
            color:#409EFF;
            cursor: pointer;
        }

        .avatar{
            width: 50px!important;
            height: 50px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
        }

    }
</style>
